Введение

Скрипт «Уведомления о действии с товаром» для uCoz предназначен для информирования клиентов интернет-магазина о действии, которое они совершают с товаром.

Уведомление появляется в случае:

- добавления товара в корзину;
- удаления товара из корзины;
- удаления всех товаров из корзины (очистка);
- добавления товара в список желаний;
- удаления товара из списка желаний;
- добавления товара к сравнению;
- удаления товара из списка сравнения.

Содержимое каждого окна разное и может быть настроено индивидуально администратором сайта. Также вы сможете с легкостью изменить дизайн как всех окон сразу, так и стилизовать каждое отдельно.

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки upcart (имена папки должно быть в нижнем регистре). Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь перейдите в созданную папку, кликнув на нее и создайте там еще две папки js и img (имена папок должны быть в нижнем регистре).

Теперь зайдите в папку js и загрузите в эту папку файлы "bPopup.js" и "jquery.easing.1.3.js" из архива со скриптом (папка "/upcart/js").
Далее, перейдите в папку img и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "/upcart/img").

Второй шаг: установка кода

Перейдите в Панель управления в верхнем баре выберите Дизайн » Управление дизайном (шаблоны) » Нижняя часть сайта. В самый низ установите следующий код:

<?if($MODULE_ID$ = 'shop')?>
<!-- Окно удаления из списка желаний -->
<div id="wishlist-success-del">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/giftb.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Товар удален из вашего списка желаний</p>
 <a href="javascript://" class="go-buy" onclick="$('.b-close').click();">Продолжить покупки</a>
</div>
<!-- Окно удаления из списка желаний -->

<!-- Окно добавления в список желаний -->
<div id="wishlist-success">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/gift.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Товар успешно добавлен в ваш список желаний</p>
 <a href="/shop/wishlist" class="go-buy">Перейти к списку желаний</a>
</div>
<!-- Окно добавления в список желаний -->

<!-- Окно удаления товара из корзины -->
<div id="cart-success-del">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/cartb.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Товар удален из вашей корзины</p>
 <a href="javascript://" class="go-buy" onclick="$('.b-close').click();">Продолжить покупки</a>
</div>
<!-- Окно удаления товара из корзины -->

<!-- Окно добавления товара в корзину -->
<div id="cart-success">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/cart.png">
 <h2 class="thank-cart">Спасибо за покупку!</h2>
 <p>Товар успешно добавлен в корзину</p>
 <a href="/shop/checkout" class="go-buy">Перейти к оформлению заказа</a>
</div>
<!-- Окно добавления товара в корзину -->

<!-- Окно удаления всех товаров из корзины -->
<div id="cart-success-del-all">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/del.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Вы удалили все товары из корзины<br>не надо так :(</p>
 <a href="javascript://" class="go-buy" onclick="$('.b-close').click();">Продолжить покупки</a>
</div>
<!-- Окно удаления всех товаров из корзины -->
 

<!-- Окно добавления товара к сравнению -->
<div id="compare-success">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/weight.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Товар успешно добавлен к сравнению</p>
 <a href="/shop/compare" class="go-buy">Перейти к сравнению товаров</a>
</div>
<!-- Окно добавления товара к сравнению -->


<!-- Окно удаления товара из списка сравнения -->
<div id="compare-success-del">
 <span class="b-close">закрыть</span>
 <img src="/upcart/img/weightb.png">
 <h2 class="thank-cart">Успешно!</h2>
 <p>Товар удален из списка сравнения</p>
 <a href="javascript://" class="go-buy" onclick="$('.b-close').click();">Продолжить покупки</a>
</div>
<!-- Окно удаления товара из списка сравнения -->


 <script src="/upcart/js/bPopup.js"></script>
 <script src="/upcart/js/jquery.easing.1.3.js"></script>
<?endif?>

Перейдите в Панель управления в верхнем баре выберите Дизайн » Управление дизайном (шаблоны) » Корзина. Найдите код скрипта, отвечающий за обработку всех действий с корзиной и замените на этот код:

<script language="Javascript"><!--
 var lock_buttons = 0;

 function clearBasket(){
 if(lock_buttons) return false; else lock_buttons = 1;
 var el = $('#shop-basket');
 if(el.length){ var g=document.createElement("div"); $(g).addClass('myWinGrid').attr("id",'shop-basket-fade').css({"left":"0","top":"0","position":"absolute","border":"#CCCCCC 1px solid","width":$(el).width()+'px',"height":$(el).height()+'px',"z-index":5}).hide().bind('mousedown',function(e){e.stopPropagation();e.preventDefault();_uWnd.globalmousedown();}).html('<div class="myWinLoad" style="margin:5px;"></div>'); $(el).append(g); $(g).show(); }
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'clear'}});
 ga_event('basket_clear');
 $('#cart-success-del-all').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideUp'}); 
 // Вывод окна об успешной отправке в корзину
 return false;
 }

 function removeBasket(id){
 if(lock_buttons) return false; else lock_buttons = 1;
 $('#basket-item-'+id+' .sb-func').removeClass('remove').addClass('myWinLoadS').attr('title','');
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'del', 'id':id}});
 $('#cart-success-del').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideUp'});
 // Удаление из корзины
 return false;
 }

 function add2Basket(id,pref){
 if(lock_buttons) return false; else lock_buttons = 1;
 var opt = new Array();
 var err_msg = '';
 $('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
 $('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
 $('#'+pref+'-'+id+'-options-selectors').find('input:checked, select').each(function(){
 opt.push(this.id.split('-')[3]+(this.value !== '' ? '-'+this.value :''));

 if(this.value !== ''){
 opt.push(this.id.split('-')[3]+(this.value !== '' ? '-'+this.value :''));
 }else{
 err_msg += '<li>'+$(this).parent().parent().find('span.opt').html().replace(':', '')+'</li>';
 }
 });

 if(err_msg == ''){
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
 $('#cart-success').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideDown'}); 
 // Вывод окна об успешной отправке в корзину
 ga_event('basket_add');
 }else{
 lock_buttons = 0;
 //
 shop_alert('<div class="MyWinError">Опции<ul>'+err_msg+'</ul>обязательны для выбора</div>','Замечания','warning',350,100,{tm:8000,align:'left',icon:'/.s/img/icon/warning.png', 'onclose': function(){ $('#b'+pref+'-'+id+'-basket').removeAttr('disabled'); $('#'+pref+'-'+id+'-basket').removeClass('wait').addClass('add'); }});
 }
 return false;
 }

 
 
 function wishlist(obj) {
 if(lock_buttons) return false; else lock_buttons = 1;
 //Вызываем модальное окно - удалено
 if ( $(obj).hasClass("wish wdel") ) { $('#wishlist-success-del').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideIn', positionStyle: 'fixed'}); }
 //Вызываем модальное окно - добавлено
 if ( $(obj).hasClass("wish wadd") ) { $('#wishlist-success').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideBack', positionStyle: 'fixed'}); }
 var id = null;
 id = obj.id.split('-')[1];
 $(obj).removeClass().addClass('wish').addClass('wait');
 _uPostForm('',{type:'POST',url:'/shop/wishlisth',data:{'goods_id':id}});
 return false;
 }
 
 
 function comparelistToggle( caller ){
 if(lock_buttons) return;
//Вызываем модальное окно - удаляем
 if ( $(caller).hasClass("compare-widget-remove") ) { $('#compare-success-del').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideBack', positionStyle: 'fixed'}); }
 //Вызываем модальное окно - добавлено
 if ( $(caller).hasClass("compare-widget-add") ) { $('#compare-success').bPopup({easing: 'easeOutBack', speed: 650, transition: 'slideIn', positionStyle: 'fixed'}); } 
 var id = $(caller).data('id');
 $('.compare-widget-'+id).addClass('compare-widget-wait');
 lock_buttons = 1;
 _uPostForm('', {type:'POST',url:'/shop/compare', data:{'action':'toggle', id:id}});
 }
 
 
 
 
 function buyNow(id,pref){
 if(lock_buttons) return false; else lock_buttons = 1;
 var opt = new Array();
 var err_msg = '';
 $('#b'+pref+'-'+id+'-buynow').attr('disabled','disabled');
 $('#'+pref+'-'+id+'-buynow').removeClass('done').removeClass('err').removeClass('now').addClass('wait').attr('title','');
 $('#'+pref+'-'+id+'-options-selectors').find('input:checked, select').each(function(){
 if(this.value !== ''){
 opt.push(this.id.split('-')[3]+'-'+this.value);
 }else{
 err_msg += '<li>'+$(this).parent().parent().find('span.opt').html().replace(':', '')+'</li>';
 }
 });
 if(err_msg == ''){
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value'), 'now':1}});
 ga_event('basket_buynow');
 }else{
 lock_buttons = 0;
 shop_alert('<div class="MyWinError">Опции<ul>'+err_msg+'</ul>обязательны для выбора</div>','Замечания','warning',350,100,{tm:8000,align:'left',icon:'/.s/img/icon/warning.png', 'onclose': function(){ $('#b'+pref+'-'+id+'-buynow').removeAttr('disabled'); $('#'+pref+'-'+id+'-buynow').removeClass('wait').addClass('add'); }});
 }

 return false;
 }

 //--></script>

Третий шаг: установка стилей

Перейдите в Панель управления в верхнем баре выберите Дизайн » Управление дизайном (шаблоны). Найдите таблицу стилей CSS модуля Интернет-магазин и в самый конец установите этот код:

.thank-cart {text-transform:uppercase;margin: 40px 0 20px;font-weight:bold;font-size:28px;color:#575656;}
 #cart-success p, #cart-success-del p, #wishlist-success p, #wishlist-success-del p, #cart-success-del-all p, #compare-success-del p, #compare-success p {margin: 0 0 30px;color: #7f7f7f;font-size:16px;font-weight:bold;}
 a.go-buy {display:inline-block;text-decoration:none;line-height:40px; border-radius:3px;background:#e74c3c;padding: 0 18px;color:#fff;transition: all 0.3s;}
 a.go-buy:hover {background:#ff5746;transition: all 0.3s;}
 #cart-success, #cart-success-del {text-align:center;background:#fff;display:none; padding:40px 20px;min-width:380px;min-height: 180px;}
 #wishlist-success, #wishlist-success-del, #cart-success-del-all, #compare-success-del, #compare-success {text-align:center;background:#fff;display:none; padding:40px 20px;min-width:380px;min-height: 180px;}
.b-close{cursor:pointer;position:absolute;right:15px;top:15px;text-transform:uppercase;font-size:12px;letter-spacing:2px;transition: all 0.3s;}
.b-close:hover {color:#e74c3c;transition: all 0.3s;}

Четвёртый шаг: настройка и использование

Для создания окон уведомления используются плагины bPopup и jQuery easing, которые позволяют настраивать окна по своему усмотрению.
Например, вы можете изменить способ появления окна при помощи свойства transition, которое может принимать следующие значения:

• fadeIn – плавное появление;
• slideDown – окно выдвигается сверху.
• slideUp – окно выдвигается снизу.
• slideIn – окно выдвигается слева.
• slideBack – окно выдвигается справа.

Свойство speed регулирует скорость появления и пропадания окошка, указывается в милисекундах.

Свойство positionStyle имеет всего два значения и позволяет либо закрепить окно неподвижно, либо заставить его плавно тянуться за прокруткой страницы.

• fixed – неподвижно закреплено и двигается при прокрутке;
• absolute – при прокрутке плавно подъезжает к центру.

Это далеко не все свойства, более подробно о плагине можно узнать из документации на сайте разработчика: http://dinbror.dk/blog/bPopup/